<template>
  <el-dialog :title="delegation.name" class="gl_dialog_TitleLine" :visible.sync="dialogVisible" width="880px">
    <div v-loading="loading">
      <div v-for="otem in official" :key="otem.id" class="people gl_mb_15" style="margin-right: 60px;">
        <div class="img_box box">
          <img v-if="otem.official.imagePath" width="40" :src="getStaticFileUrl(otem.official.imagePath)" alt="">
          <img v-else width="40" src="@/assets/images/person_default.png" alt="">
        </div>
        <div class="box">
          <p>{{ otem.registerTagType.name }}</p>
          <p>{{ otem.official.name }}</p>
        </div>
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in detail" :key="index" :title="item.eventCategoryName + '：' + item.sum + '人'" :name="index + 1">
          <div v-for="(jtem, jndex) in item.events" :key="jndex">
            <div class="people gl_mr_30">
              <span>{{ jtem.eventName }} （{{ jtem.entries.length }}）人</span>
            </div>
            <div class="people gl_mr_30" style="width: 62%">
              <div v-for="(ktem, kndex) in jtem.entries" :key="kndex" class="people gl_mr_15 gl_mb_5">
                <div class="img_box">
                  <img v-if="ktem.imagePath" width="40" :src="getStaticFileUrl(ktem.imagePath)" alt="">
                  <img v-else width="40" src="@/assets/images/person_default.png" alt="">
                </div>
                <p style="text-align:center;">{{ ktem.name }}</p>
              </div>
            </div>
            <el-divider v-if="jndex !== item.events.length - 1" />
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="close()">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficials, // 获取教练员、领队信息
  api_GET_EventsManagementCompetitionEntryDataDelegationEntryData // 获取报项数据
} from '@/extend/api/gameswaggerApi/app.js';
import {
  Api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficialsQO,
  Api_GET_EventsManagementCompetitionEntryDataDelegationEntryDataQO
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'Detail',
  data() {
    return {
      loading: false,
      Api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficialsQO: new Api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficialsQO(),
      Api_GET_EventsManagementCompetitionEntryDataDelegationEntryDataQO: new Api_GET_EventsManagementCompetitionEntryDataDelegationEntryDataQO(),
      dialogVisible: false,
      delegation: {},
      activeNames: [],
      official: [], // 教练、领队信息
      detail: []
    };
  },
  methods: {
    // 打开弹窗
    open(delegation) {
      this.dialogVisible = true;
      this.delegation = delegation;
      this.getOfficials();
      this.getData();
    },
    // 获取教练、领队信息
    getOfficials() {
      this.loading = true;
      this.Api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficialsQO.competitionId = this.$route.params.id;
      this.Api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficialsQO.delegationId = this.delegation.id;
      api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficials(this.Api_GET_EventsManagementCompetitionEntryDataDelegationEntryOfficialsQO).then(res => {
        this.official = res;
        this.loading = false;
      }, () => {
        this.loading = false;
        this.$message({ type: 'error', message: '获取教练员、领队失败！' });
      });
    },
    // 获取表格数据
    getData() {
      this.loading = true;
      this.Api_GET_EventsManagementCompetitionEntryDataDelegationEntryDataQO.CompetitionId = this.$route.params.id;
      this.Api_GET_EventsManagementCompetitionEntryDataDelegationEntryDataQO.DelegationId = this.delegation.id;
      api_GET_EventsManagementCompetitionEntryDataDelegationEntryData(this.Api_GET_EventsManagementCompetitionEntryDataDelegationEntryDataQO).then(res => {
        this.detail = this.handleSum(res.items);
        this.loading = false;
      }, () => {
        this.loading = false;
        this.$message({ type: 'error', message: '获取报项数据失败！' });
      });
    },
    // 统计人数
    handleSum(data) {
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var sum = 0;
        for (var j = 0; j < item.events.length; j++) {
          var jtem = item.events[j];
          sum = sum + jtem.entries.length;
        }
        item['sum'] = sum;
      }
      return data;
    },
    // 图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    close() {
      this.dialogVisible = false;
      this.activeNames = [];
    }
  }
};
</script>

<style lang="scss" scoped>
.people {
	display: inline-block;
	vertical-align: middle;
}
.people .box{
	display: inline-block;
	margin-right: 15px;
	vertical-align: middle;
}
.img_box {
  border: 1px solid rgb(230, 235, 245);
  border-radius: 20px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0 auto;
}
</style>
